// @ts-nocheck
import React, { useState, useRef, useEffect, Fragment } from 'react';
import { Input, DotLoading } from 'antd-mobile';
import { CaretDownOutlined } from '@ant-design/icons';
import { history } from 'umi';
import './index.less';
import '@/astise/font/iconfont.js';
import 'lib-flexible';
export default function index() {
  const [errorMessage, setErrorMessage] = useState('');
  // 定位容器div
  let Location = useRef();
  let [currentLocation, setCurrentLocation] = useState('');
  // 获取经度
  let [lat, setLat] = useState();
  // 获取维度
  let [lon, setLon] = useState();

  // 获取省份
  let [province, setProvince] = useState('');
  // 获取城市
  let [city, setCity] = useState('');
  // 获取行政区
  let [district, setDistrict] = useState('');
  // 获取街道
  let [street, setStreet] = useState('');
  // 获取街道号
  let [streetNumber, setStreetNumber] = useState('');
  // 显示今天日期
  let [taydate, settaydate] = useState(0);
  console.log(city);

  useEffect(() => {
    showLocation();
    // ceshi();
    //  getTakeoutNav();
  }, []);
  function location_1(position) {
    console.log(position.coords.longitude, '12345');
    const lon = position.coords.longitude;
    const lat = position.coords.latitude;
    setLon(lon);
    setLat(lat);

    // 显示获取到的用户定位中的纬度和经度
    // x.innerHTML = "纬度:" + position.coords.latitude + "经度:" + position.coords.longitude;
    // let lon = position.coords.longitude;
    var myGeo = new BMapGL.Geocoder();
    myGeo.getLocation(new BMapGL.Point(lon, lat), function (result) {
      if (result) {
        // console.log(result.addressComponents);
        // alert(JSON.stringify(result.addressComponents.province));
        setProvince((province = result.addressComponents.province));

        // localStorage.setItem('hkzf_city',JSON.stringify([{ "label": result.addressComponents.city, "value": "" }]))

        if (localStorage.getItem('click_city') != null) {
          let data = JSON.parse(localStorage.getItem('click_city'));
          setCity(data[0].label);
        } else {
          setCity((city = result.addressComponents.city));

          localStorage.setItem(
            'hkzf_city',
            JSON.stringify([
              { label: result.addressComponents.city, value: '' },
            ]),
          );
        }

        setDistrict((district = result.addressComponents.district));
        setStreet((street = result.addressComponents.street));
        setStreetNumber((streetNumber = result.addressComponents.streetNumber));
        // console.log(city);
        setCurrentLocation(
          (currentLocation = city + district + street + streetNumber),
        );
      }
    });
  }
  function showError(error) {
    console.log(error, '123456789');

    //PERMISSION_DENIED 用户不允许地理定位
    //POSITON_UNAVAILABLE 无法获取当前位置
    // let x = Location.current;
    //TIMEOUT 操作超时
    switch (error.code) {
      case error.PERMISSION_DENIED:
        setErrorMessage('用户未开启地理定位');
        break;
      case error.POSITON_UNAVAILABLE:
        setErrorMessage('无法获取当前位置');
        break;
      case error.TIMEOUT:
        setErrorMessage('操作超时');
        break;
    }
  }
  function showLocation() {
    let x = Location.current;
    let date = new Date().getDate();
    settaydate(date);
    //判断是否可以定位
    if (navigator.geolocation) {
      // const geolocation = new window.BMapGL.Geolocation();
      console.log(navigator.geolocation, '111111');
      // console.log(geolocation,'1111112');
      console.log(
        navigator.geolocation.getCurrentPosition(location_1, showError, {
          enableHighAccuracy: true, // 位置是否精确获取
          timeout: 5000, //获取位置允许的最长时间
          maximumAge: 1000, // 多久更新获取一次位置
        }),
        '11111123',
      );
      //getCurrentPosition()中需要传入一个回调函数
      navigator.geolocation.getCurrentPosition(location_1, showError, {
        enableHighAccuracy: true, // 位置是否精确获取
        timeout: 5000000000000, //获取位置允许的最长时间
        maximumAge: 1000, // 多久更新获取一次位置
      });
    } else {
      setErrorMessage('无法获取当前位置');
    }
  }
  console.log(errorMessage);

  const [value, setValue] = useState('');
  return (
    <div className="top">
      <div ref={Location} className="location">
        {city ? (
          <Fragment>
            {city}
            <CaretDownOutlined
              onClick={() => {
                history.push('/citylist');
              }}
            />
          </Fragment>
        ) : (
          <DotLoading />
        )}
      </div>
      <div className="serch">
        <Input
          placeholder="请输入内容"
          value={value}
          onChange={(val) => {
            setValue(val);
          }}
        />
      </div>
      <div className="right">
        <span className="data">
          <svg class="icon" aria-hidden="true">
            <use href="#icon-rili"></use>
          </svg>
          <span className="datacen">{taydate}</span>
        </span>
        <span>
          <svg class="icon" aria-hidden="true">
            <use href="#icon-saomiao"></use>
          </svg>
        </span>
      </div>
    </div>
  );
}
